<template>
  <div style="height: calc(100vh - 8px - 7rem);width: 100%;">
    <!--地图模块-->
    <div class="mapdata">
      <img src="./images/map.png" style="display:block;height: 100%;width: 100%;" alt="">
    </div>
    <!--在线监测-->
    <online-monitor></online-monitor>
    <!--水厂-->
    <water-plants></water-plants>
    <!--事件信息-->
    <event-infor></event-infor>
  </div>
  <!--<map-box style="position:absolute;height: 78vh;width: 94vw;top: 0;left: 0;"></map-box>-->
</template>

<script>
import Echarts from "@/components/echarts/index";
import { overview } from "@/api/monitor"; // 不同模块的api 分开放，

import OnlineMonitor from "./components/OnlineMonitor";
import WaterPlants from "./components/WaterPlants";
import EventInfor from "./components/EventInfor";

  export default {
    name: 'monitor-index',
    components: {
      Echarts,
      OnlineMonitor,
      WaterPlants,
      EventInfor
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .mapdata{
    position: absolute;
    left: 0.5rem;
    top:1.5rem;
    background: #ccc;
    width:56vw;
    height:60%;
  }
  .online{
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    width: 56vw;
    height: 32%;
    background: #ccc;
  }
  .water{
    position: absolute;
    right: 0.5rem;
    top: 1.5rem;
    width: 40vw;
    height: 36%;
  }
  .event{
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 40vw;
    height: 56%;
  }
</style>
